<template >
  <div>
    <div style="text-align: left;margin-top:20px">
      <el-button type="primary" size="mini" @click="add">添加</el-button>
    </div>
    <div style="margin-top: 10px">
      <el-table
        v-loading="loading"
        :data="posData"
        size="mini"
        stripe
        border
        @selection-change="handleSelectionChange"
        style="width: 80%">
        <el-table-column
          type="selection"
          width="40"
          align="left">
        </el-table-column>
        <el-table-column
          prop="aaa100"
          label="代码类别"
          width="130"
          align="left">
        </el-table-column>
        <el-table-column
          prop="aaa101"
          label="类别名称"
          width="130"
          align="left">
        </el-table-column>
        <el-table-column
          prop="aaa102"
          label="代码值"
          width="130"
          align="left">
        </el-table-column>
        <el-table-column
          prop="aaa103"
          width="280"
          label="代码名称"
          align="left">
        </el-table-column>
        <el-table-column label="操作" align="left">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.row)">编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
    <div style="height:40px;margin-top:10px">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total.length" style="float:left">
        </el-pagination>
    </div>
      <el-dialog title="新增码值"
          :visible.sync="dialogVisible"
          width="25%" float="left" height="250px">  
          <div style="height:50px">
          <span>代码类别</span>
          <el-input v-model="aaa100"   style="width: 200px;margin-left:10px" size="mini"></el-input>
        </div>  
        <div style="height:50px">
          <span>类别名称</span>
          <el-input v-model="aaa101" style="width: 200px;margin-left:10px" size="mini"></el-input>
        </div>
        <div style="height:50px">
          <span>代码值</span>
          <el-input v-model="aaa102" style="width: 200px;margin-left:23px" size="mini"></el-input>
        </div>
       <div style="height:50px">
          <span>代码名称</span>
          <el-input v-model="aaa103" style="width: 200px;margin-left:10px" size="mini"></el-input>
        </div>
        <div style="margin-top: 10px">
          <el-button @click="save"  type="primary"  size="mini">保存</el-button>
          <el-button @click="close" size="mini">关闭</el-button>
        </div>
      </el-dialog>
    </div>
    <div>
      <el-dialog title="编辑码值"
          :visible.sync="dialogEditVisible"
          width="25%" float="left" height="250px">  
          <div style="height:50px">
          <span>代码类别</span>
          <el-input v-model="aaa100" disabled="disabled" style="width: 200px;margin-left:10px" size="mini"></el-input>
        </div>  
        <div style="height:50px">
          <span>类别名称</span>
          <el-input v-model="aaa101" style="width: 200px;margin-left:10px" size="mini"></el-input>
        </div>
        <div style="height:50px">
          <span>代码值</span>
          <el-input v-model="aaa102" disabled="disabled" style="width: 200px;margin-left:23px" size="mini"></el-input>
        </div>
       <div style="height:50px">
          <span>代码名称</span>
          <el-input v-model="aaa103" style="width: 200px;margin-left:10px" size="mini"></el-input>
        </div>
        <div style="margin-top: 10px">
          <el-button @click="edit" size="small" type="primary">保存</el-button>
          <el-button @click="close_edit" size="mini">关闭</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
  export default{
    mounted: function () {
      this.loadTableData();
    },
    methods: {
      loadTableData(){
        var _this = this;
        this.currentPage=1;
        this.pagesize=10;
        var params = [];
        this.loading = true;
        this.getRequest("/aa10/getCode").then(resp=> {
          _this.loading = false;
          if (resp && resp.status == 200) {
            _this.posData = resp.data; 
            _this.total=resp.data;
            _this.posData = resp.data.slice((_this.currentPage-1)*_this.pagesize,_this.currentPage*_this.pagesize);
          }
        })
      
      },
    add(){
        this.dialogVisible=true;
      },
     close(){
        this.dialogVisible = false;
      },
      close_edit(){
        this.dialogEditVisible = false;
      },
    save(){
        var _this = this;
        this.postRequest("/aa10/addCode",{
          aaa100:this.aaa100,
          aaa101:this.aaa101,
          aaa102:this.aaa102,
          aaa103:this.aaa103,
        }).then(resp=>{
          if (resp && resp.status == 200) {
              var data = resp.data;
              this.aaa100 = "";
              this.aaa101 = "";
              this.aaa102 = "";
              this.aaa103 = "";
              this.$message({type:data.status,message:data.msg});
              this.loadTableData();
              this.close();
          }
        });
      },
      edit(){
        var _this = this;
        this.postRequest("/aa10/editCode",{
          aaa100:this.aaa100,
          aaa101:this.aaa101,
          aaa102:this.aaa102,
          aaa103:this.aaa103,
        }).then(resp=>{
          if (resp && resp.status == 200) {
              var data = resp.data;
              this.$message({type:data.status,message:data.msg});
              this.loadTableData();
              this.close();
          }
        });
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleEdit(row){
        this.dialogEditVisible=true;
        this.aaa100 = row.aaa100;
        this.aaa101 = row.aaa101;
        this.aaa102 = row.aaa102;
        this.aaa103 = row.aaa103;
        this.loadTableData();
      },
      handleDelete(data){
        var _this = this;
        this.postRequest("/aa10/deleteCode",{
          aaa100:data.aaa100,
          aaa102:data.aaa102,
        }).then(resp=>{
          if (resp && resp.status == 200) {
              var data = resp.data;
              this.$message({type:data.status,message:data.msg});
              this.loadTableData();
              this.close();
          }
        });
      },
      handleSizeChange(data){
        this.pagesize = data;
        this.posData = this.total.slice((this.currentPage-1)*this.pagesize,this.currentPage*this.pagesize);
      },
      handleCurrentChange(data){
        this.currentPage = data;
        this.posData = this.total.slice((this.currentPage-1)*this.pagesize,this.currentPage*this.pagesize);
      },

    },
    data(){
      return {
        aaa100:'',
        aaa101:'',
        aaa102:'',
        aaa103:'',
        total:'',
        currentPage:1,
        pagesize:10,
        loading: false,
        dialogVisible: false,
        dialogEditVisible:false,
        posData: []
      }
    },
    props: ['state']
  }
</script>
